<template>
    <!-- 改组件用在 views/NewSong.vue 新歌组件 -->
    <!-- 歌曲列表 -->
    <ul class="songList"> 
        <li v-for="(song,index) in songlist" :key="index">
            <div class="left">
                <!-- <h3>{{song.name}}</h3> -->
                <h3 v-html="$options.filters.highKey(song.name,keywords)"></h3>
                <span class="sq-icon" :class="{'sq-icon':song.song.privilege.maxbr==999000}">
                    <b v-for="(artist,i) in song.song.artists" :key="i">
                        <i v-html="$options.filters.highKey(artist.name,keywords)"></i>
                         {{ i | filterChar(song.song.artists.length)}}
                    </b>
                    - <i v-html="$options.filters.highKey(song.song.album.name,keywords)"></i>
                    </span>
            </div>
            <!-- 播放按钮图标 -->
            <i class="play-btn"
                @click="$emit('play',song)"
            ></i>
        </li>
    </ul>
</template>
<script>
export default {
    props:{
        songlist:{  //歌单数据
            type:Array,
            default:function(){ return []; }
        },
        // keywords的值 从 Search.vue => SearchResult.vue (再次传值,否则keyeords为空)=> MusicList.vue
        keywords:{
            type:String,
            default:""
        }
    },
    created(){
        // console.log("",this);
    },
    filters:{
        filterChar(value,num){
            // index会逐个遍历，当value = 歌手人数时,不加"/"
            return value<num-1?" / ":"";
        },
        // 高亮
        highKey(val,keywords){
            // console.log("keywords==>",keywords);
            // 匹配的歌词与 关键字相同的高亮
            let reg=new RegExp(`${keywords}`,'g');
            if(reg.test(val)){
                //把关键词 替换成 <b style="color:red">关键词</b>
                val=val.replace(reg,`<b style="color:#33a3f5">${keywords}</b>`);
            }
            return val;
        },
    },
}
</script>
<style lang="less" scoped>
.songList{
    li{
        padding:5px 10px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-bottom: 1px solid #eee;
        div.left{
            flex: 1;
            overflow: hidden;
            text-overflow: ellipsis; //显示省略符号来代表被修剪的文本
            white-space: nowrap; //段落中的文本不进行换行
            word-break: normal;
            h3{
                font-size: 17px;
                line-height: 25px;
                overflow: hidden;
                text-overflow: ellipsis; //显示省略符号来代表被修剪的文本
                white-space: nowrap; //段落中的文本不进行换行
                word-break: normal; //在恰当的断字点进行换行,此处默认
            }
            span{
                font-size: 12px;
                color: #888;
                line-height: 18px;
                position: relative;
                &.sq-icon{
                    padding-left: 16px;
                    &::after{
                        content: "";
                        position: absolute;
                        left: 0px;
                        top: 50%;
                        transform: translateY(-50%);
                        width: 12px;
                        height: 8px;
                        background: url(../assets/image/index_icon_2x.png) no-repeat;
                        background-size: 166px 97px;
                    }
                }
            }
        }
        i.play-btn{
            width: 22px;
            height: 22px;
            background: url(../assets/image/index_icon_2x.png) no-repeat;
            background-size: 166px 97px;
            background-position: -24px 0px;  //坐标缩小1倍

        }
    }
}
</style>